<template>
  <div id="cart">
    <div class="search_bar clearfix">
      <a href="index.html"><img src="../assets/images/logo.png" class="logo fl"></a>
      <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
    </div>

    <div class="total_count">全部商品<em>{{ products.length }}</em>件</div>
    <ul class="cart_list_th clearfix">
      <li class="col01">商品名称</li>
      <li class="col02">商品单位</li>
      <li class="col03">商品价格</li>
      <li class="col04">数量</li>
      <li class="col05">小计</li>
      <li class="col06">操作</li>
    </ul>

    <div id="goods">
      <ul ref="ul" class="cart_list_td clearfix" v-for="(sp, index) in products" :key="index">
        <li class="col01"><input type="checkbox" name="" v-model="checkeds[index]"></li>
        <li class="col02"><img :src="serverApiUrl + sp.imgUrl"></li>
        <li class="col03">{{ sp.name }}<br><em>{{ sp.price }}/{{ sp.unit }}</em></li>
        <li class="col04">{{ sp.unit }}</li>
        <li class="col05">{{ sp.price }}</li>
        <li class="col06">
          <div class="num_add">
            <a href="javascript:;" class="add fl" @click="add(index)">+</a>
            <input type="text" class="num_show fl" :value="sp.quantity">
            <a href="javascript:;" class="minus fl" @click="mins(index)">-</a>
          </div>
        </li>
        <li class="col07">{{ sp.money }}</li>
        <li class="col08"><a @click="del(sp.id, index)">删除</a></li>
      </ul>
    </div>

    <ul class="settlements">
      <li class="col01"><input type="checkbox" name="" @click="checkAll($event.currentTarget)"></li>
      <li class="col02">全选</li>
      <li class="col03">合计(不含运费)：<span>¥</span><em>{{ sum }}</em><br>共计<b>{{ num }}</b>件商品</li>
      <li class="col04"><a @click="toOrder()">去结算</a></li>
    </ul>
  </div>
</template>

<script>
import { getCartListApi } from '../api/GetCartList'
import { updateCartApi } from '../api/UpdateCart'
import { deleteCartApi } from '../api/DeleteCart'
import { serverApiUrl } from '../api/serverApiUrl'
import Vue from 'vue'
export default {
  name: 'Cart',
  data() {
    return {
      products: [],
      userid: JSON.parse(window.sessionStorage.getItem("user")).id,
      total: 0,
      num: 0,
      checkeds: new Array(false),
      payproducts: [],
      serverApiUrl: serverApiUrl,
    }
  },
  methods: {
    listcart() {

      getCartListApi({ "id": this.userid }).then(resp => {
        this.products = resp;

      })
    },
    del(id, index) {
      deleteCartApi(id).then(resp => {
        if (resp.msg == "success") {
          this.products.splice(this.$refs.ul[index], 1)
        }
      })
    },
    add(index) {
      this.products[index].quantity = this.products[index].quantity + 1;
      this.products[index].money = this.products[index].quantity * this.products[index].price;
      updateCartApi({
        "id": this.products[index].id,
        "productId": this.products[index].productid,
        "money": this.products[index].money,
        "quantity": this.products[index].quantity,
        "userId": JSON.parse(window.sessionStorage.getItem("user")).id,
        "created": this.products[index].created
      }).then(resp => {

      })
    },
    mins(index) {
      if (this.products[index].quantity - 1 == 0) {
        return;
      }
      else {
        this.products[index].quantity = this.products[index].quantity - 1;
      }
      this.products[index].money = this.products[index].quantity * this.products[index].price;
      updateCartApi({
        "id": this.products[index].id,
        "productId": this.products[index].productid,
        "money": this.products[index].money,
        "quantity": this.products[index].quantity,
        "userId": JSON.parse(window.sessionStorage.getItem("user")).id,
        "created": this.products[index].created
      }).then(resp => {

      })
    },
    toOrder() {
      let x = 0;
      for (let i in this.products) {
        if (this.checkeds[i]) {
          this.payproducts[x] = this.products[i];
          x++;
        }
      }
      console.log(this.payproducts);
      this.$router.push({
        path: '/order',
        query: {
          product: this.payproducts
        }
      })
    },
    checkAll(event) {
      if (event.checked) {
        for (let i = 0; i < this.products.length; i++) {
          Vue.set(this.checkeds, i, true);
        }
      }
      else {
        for (let i = 0; i < this.products.length; i++) {
          Vue.set(this.checkeds, i, false);
        }
      }
    }

  },
  created() {
    this.listcart();
  },
  computed: {
    sum() {
      let sum = 0;
      this.num = 0;
      for (let i in this.products) {
        if (this.checkeds[i]) { //如果checkeds[i]的结果为truth，则进行累加
          sum += this.products[i].price * this.products[i].quantity;
          this.num++;
        }
      }

      return sum;
    },

  }
}
</script>
